MacのMouseWheel

2008 年 4月 17 日
kosuke

既に多くの方が書かれていますが、FlashでMacのホイールマウスを検知するクラスをPIXEL BREAKER. さんが公開しています。これを試した覚え書きです。

FlashのMouseWheelはMacでは効かないことがマニュアルにも書かれていますが、PIXEL BREAKER.さんのクラスとJavaScriptを使うと検知できます。

僕は制作環境がMacなので、このクラスは前から気になっていたので試してみました。

実は本当に興味があるのはJavaScriptとFlash間の通信を自分なりに整理したいことでして、MouseWheelのJavaScriptがアドオンしている、SWFObject.jsとその中身にあります。
今後そっちを調べるつもり。

サンプル

PIXEL BREAKER.さんがAS3用、AS2用を作られています。
・AS3
・AS2

ソースをダウンロードして、classファイルやjsファイルを自分の使うディレクトリに配置します。SWFObject.jsバーション違いのサンプルが入っていますが僕は2.0を使いました。まずhtmlを準備します。

・HTML

 
<!--jsを読み込みます-->
<script src="js/swfobject.js" type="text/javascript"><!--mce:0--></script>
<script src="js/swfmacmousewheel2.js" type="text/javascript"><!--mce:1--></script>
<script type="text/javascript"><!--mce:2--></script>
 
<!--表示するコンテナをbodyに記述しておきます-->

次にFlash側からやることは以下のような感じ。

・ActionScript

AS3の場合

import com.pixelbreaker.ui.osx.MacMouseWheel;
//クラスを読み込みます。
MacMouseWheel.setup( stage );
//初期化。引数はstageを渡します。

//マウスホイールのイベントを付けたいオブジェクトにリスナーを設定します。

stage.addEventListener( MouseEvent.MOUSE_WHEEL, mouseWheelHandler );
function mouseWheelHandler(event:Event){
	trace( event.delta );
	//スクロールの値がdeltaに入っています。
}

AS2の場合

import com.pixelbreaker.ui.MouseWheel;
//クラスを読み込みます。
MouseWheel.addListener( this );
//MouseWheelが起きた時の通知先を登録します。
 
//マウスホイールが起きた時のコールバック
this.onMouseWheel = function(delta){
	trace(delta);
	//スクロールの値がdeltaに入っています。
}

MouseWheelクラスを使うと、意識せずMacでもホイールマウスを検知できるので汎用性は高いと思ったのだけれど、問題はあるそう。
ブラウザ毎にスクロール量が異なったり、フォーカスが固定されたりするようです。
とはいえ、そもそも対応していないMacに対応でき、全画面なら問題なさそうだし、プラス面の方が多いと思います。

参考
・AS3 Macでのマウススクロールイベント
 ・Macでもマウスホイールできるスクロールバーのサンプル

Flash, JavaScript

2BLOG